<template>
	<div class="main_content">
		<div class="top_seach">
			<div class="btns">
				<el-button  type="primary" icon="el-icon-plus" @click="handleAdd" style="margin-right: 10px;"></el-button>
				<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;" prefix-icon="el-icon-search" clearable/>
				<el-button  type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
			</div>
		</div>
		<div class="content_table">
			<el-table :data="ScenicSpotData" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand" style="display: flex;">
							<div class="ImgBox">
								<el-form-item>
									<img :src="'/api/file/'+props.row.spotPicture" width="200" />
								</el-form-item>
							</div>
							<div class="InfoBox">
								<el-form-item label="景点地址">
									<span>{{props.row.spotLocation}}</span>
								</el-form-item>
								<el-form-item label="开放时间">
									<span>{{ props.row.openingHours }}</span>
								</el-form-item>
								<el-form-item label="地区">
									<span>{{ props.row.spotRegion}},{{ props.row.spotLocation}}</span>
								</el-form-item>
								<el-form-item label="更新时间">
									<span>{{ props.row.updateTime }}</span>
								</el-form-item>
								<el-form-item label="公告信息" show-overflow-tooltip style="overflow: hidden;">
									<span >{{ props.row.announcement }}</span>
								</el-form-item>
							<el-form-item label="创建时间">
								<span>{{ props.row.createTime }}</span>
							</el-form-item>
							</div>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="景点名称" prop="spotName" width="200">
				</el-table-column>
				<el-table-column label="所属地区" prop="spotRegion" width="200">
				</el-table-column>
				<el-table-column label="详细地址" prop="spotLocation" width="200">
				</el-table-column>
				<el-table-column label="景点介绍" prop="postContent" width="150">
					<template slot-scope="scope">
						<el-button type="text" @click="showContent(scope.row.spotIntroduce)">显示内容</el-button>
					</template>
				</el-table-column>
				<el-table-column label="简介" prop="spotBrief" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="200">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<EditorScenicSpot ref="editScenicSpot"></EditorScenicSpot>
		<AddScenicSpot ref="addScenicSpot"></AddScenicSpot>
		<el-dialog title="内容" :visible.sync="dialogFormVisible1">
			<div class="w-e-text">
				<div v-html="content"></div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import EditorScenicSpot from "../../components/backstage/EditorScenicSpot.vue"
	import AddScenicSpot from "../../components/backstage/AddScenicSpot.vue"
	import scenicSpotApi from "@/api/scenicSpot.js"
	export default {
		components: {
			EditorScenicSpot,
			AddScenicSpot
		},
		data() {
			return {
				total: 0,
				pageSize: 5, 
				currentPage: 1,
				input: "",
				ScenicSpotData: [],
				dialogFormVisible1: false,
				options:[],
				content:"",
			}
		},
		methods: {
			showContent(row) {
				this.content = row;
				this.dialogFormVisible1 = true;
			},
			handleEdit(index, row) { //编辑点击事件
				console.log(index, row);
				this.$refs.editScenicSpot.options = this.options;
				this.$refs.editScenicSpot.value = row.spotRegion.split(",");
				this.$refs.editScenicSpot.dialogFormVisible = true;
				this.$refs.editScenicSpot.form = JSON.parse(JSON.stringify(row));
				this.$refs.editScenicSpot.fileList = row.spotPicture.split(",").map((path, index) => ({
					uid: index,
					url: this.$store.state.imgShowRoad2 + '/file/'+path,
					name: `file-${index}`,
				}));
				this.$refs.editScenicSpot.createE();
			},
			handleAdd() {
				this.$refs.addScenicSpot.dialogFormVisible = true;
				this.$refs.addScenicSpot.options = this.options;
				this.$refs.addScenicSpot.createEditor();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteScenic(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async deleteScenic(row) {//删除
				const res = await scenicSpotApi.deleteScenic("/znScenicspot/deleteScenic/" + row.spotId);
				this.SearchScenicAll();
			},
			async handleSearch() { //搜索
				this.SearchScenicAll();
			},
			async SearchScenicAll() {//全部
				const res = await scenicSpotApi.SearchScenicAll("/znScenicspot/SearchScenicAll", {
					input: this.input,
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.ScenicSpotData = res.data.records;
					this.total = res.data.total;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.SearchScenicAll();
			},
			async GetTree() {
				const res = await scenicSpotApi.GetTree("/sysRegion/RegionTree");
				if (res.code == 200) {
					this.options = res.data;
				}
			},
		},
		created() {
			this.SearchScenicAll();
			this.GetTree();
		}
	}
</script>

<style lang="scss">
	.main_content {
		height: 100%;

		.top_seach {
			
			height: 12%;
			position: relative;
			.btns{
				display: flex;
				position: absolute;
				left: 75%;
				bottom: 50%;
			}
		}

		.content_table {
			height: 78%;

			.demo-table-expand {
				font-size: 0;

			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 100%;
			}

			.ImgBox {
				margin: 0 20px 0 20px;
				img{
					
					height: 150px;
				}
			}

			.InfoBox {
				
			}
		}

		.footer_page {
			height: 10%;
			position: relative;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(50%);

			}
		}

	}
</style>